<template>
    <div id="rBar1">
    </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
    name: "echarts",
    data: function () {
        return {

        }
    },
    mounted: function () {
        this.echartsInit();
    },
    methods: {
        async echartsInit() {
            await this.$axios({
                url: 'daily/trend',
                method: 'get'
            }).then(({ data }) => {
                if (data.code == 200) {
                    console.log(data.data);
                    echarts.init(document.getElementById('rBar1')).setOption({
                        tooltip: {
                            trigger: 'axis',
                            show: true,
                            axisPointer: {
                                type: 'line',
                                label: {
                                    backgroundColor: '#6a7985'
                                }
                            }
                        },
                        legend: {
                            data: ['告警', '火警', '故障'],
                            textStyle: {//图例文字的样式
                                color: '#fff'
                            }
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        xAxis: [
                            {
                                type: 'category',
                                boundaryGap: false,
                                data: ['2022.10.14', '', '', '2022.10.17', '', '', '2022.10.20'],
                                axisLabel: {
                                    show: true,
                                    textStyle: {
                                        color: '#fff'
                                    },
                                    axisLabel: {
                                        show: true,
                                        textStyle: {
                                            color: '#fff'
                                        }
                                    }
                                }
                            }
                        ],
                        yAxis: [
                            {
                                type: 'value'
                            }
                        ],
                        series: [
                            {
                                name: '告警',
                                type: 'line',
                                itemStyle: {
                                    color: 'rgb(195,145,70)'
                                },
                                areaStyle: {
                                    color: 'rgb(99,104,112)'
                                },
                                emphasis: {
                                    focus: 'series',
                                    blurScope: 'coordinateSystem'
                                },
                                data: [5, 7, 9, 2, 3, 4, 7]
                            },
                            {
                                name: '火警',
                                type: 'line',
                                itemStyle: {
                                    color: 'rgb(176,100,102)'
                                },
                                areaStyle: {
                                    color: 'rgb(130,102,108)'
                                },
                                emphasis: {
                                    focus: 'series'
                                },
                                data: [2, 2, 3, 1, 9, 0, 4]
                            },
                            {
                                name: '故障',
                                type: 'line',
                                itemStyle: {
                                    color: 'rgb(129,247,248)'
                                },
                                areaStyle: {
                                    color: 'rgb(130,141,145)'
                                },
                                emphasis: {
                                    focus: 'series'
                                },
                                data: [0, 1, 2, 1, 2, 2, 3]
                            }
                        ]
                    })
                } else {
                    echarts.init(document.getElementById('rBar1')).showLoading();
                }
            })
        }
    }
}
</script>

<style scoped lang="less">
#rBar1 {
    width: 100%;
    height: 80%;
    z-index: 999;
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>